<template>
  <div>
    <el-card style="margin-top: 20px">
      <up-file @updateList="updateList"></up-file>
      <el-table
        :data="fileListPage.records"
        :row-key="fileListPage.records.id"
        style="width: 100%">
        <el-table-column
          label="文件名称"
          prop="fileName">
        </el-table-column>
        <el-table-column
          label="类型">
          <template slot-scope="scope">
            <el-tag type="success" size="mini">{{getFileType(scope.row)}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          align="right">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="downFile(scope.row)">下载</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="delFile(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        v-if="fileListPage!=null"
        class="userPag"
        @current-change="current"
        background
        layout="total,prev, pager, next"
        :current-page="fileListPage.current"
        :page-size="fileListPage.size"
        :total="fileListPage.total">
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import axios from "axios";
import UpFile from "@/components/UpFile";
export default {
  data(){
    return{
      fileListPage:null //文件列表分页数据
    }
  },
  components:{
    UpFile
  },
  created() {
    this.getFileList(1);
  },
  methods:{
    /*请求文件数据*/
    getFileList(current){
      this.$axios.get('/file/getFileList?current='+current).then((res)=>{
        this.fileListPage=res.data.data;
      })
    },
    /*获取文件类型*/
    getFileType(row){
      return row.fileName.split('.')[1]
    },
    /*当前页*/
    current(currentPage) {
      this.getFileList(currentPage)//点击第几页
    },
    /*下载文件*/
    downFile(row){
      axios.get(this.$BaseUrl+'/file/downloadFile?name='+row.fileName,
        {responseType:'blob',withCredentials: false,headers:{token:sessionStorage.getItem('token')}}).then(res => {
        if (!res) {
          this.$message.error("下载文件失败");
          return false;
        }
        const blob = new Blob([res.data], {type: 'application/octet-stream;charset=utf-8'});
        const downloadElement = document.createElement('a');
        const href = window.URL.createObjectURL(blob);
        let contentDisposition = res.headers['content-disposition'];  //从response的headers中获取filename, 后端response.setHeader("Content-disposition", "attachment; filename=xxxx.docx") 设置的文件名;
        let patt = new RegExp("filename=([^;]+\\.[^\\.;]+);*");
        let result = patt.exec(contentDisposition);
        let filename = decodeURI(result[1]);
        downloadElement.style.display = 'none';
        downloadElement.href = href;
        downloadElement.download = filename ; //下载后文件名
        document.body.appendChild(downloadElement);
        downloadElement.click(); //点击下载
        document.body.removeChild(downloadElement); //下载完成移除元素
        window.URL.revokeObjectURL(href); //释放掉blob对象
      })
    },
    /*文件上传后更新列表数据*/
    updateList(){
      this.getFileList(1);
    },
    /*删除文件*/
    delFile(row){
      this.$axios.get('/file/delFile?name='+row.fileName).then((res)=>{
        this.$message.success("删除成功");
      })
    },
  }
}
</script>
<style>
.userPag{
  margin-top: 10px;
  margin-bottom: 10px;
  float: right;
}
</style>
